<template>
    <div class="example-editor" ref="editorRef"></div>
</template>

<script lang="ts" setup>
import { mxCell, type mxGraph } from "mxgraph";
import { onMounted, ref, Ref } from "vue";
import {
    myMxClient,
    myMxCodec,
    myMxConstants,
    myMxEdgeStyle,
    myMxGraph,
    myMxPoint,
    myMxRubberband,
    myMxUtils,
} from "@/components/myMxGraph/myMxGraphLoader";
// from "../myMxGraph/myMxGraphLoader";
const editorRef: Ref<HTMLDivElement | undefined> = ref();
const currentGraph: Ref<mxGraph | undefined> = ref();
function initGraph() {
    const container = editorRef.value;
    if (!myMxClient.isBrowserSupported()) {
        myMxUtils.error("浏览器不支持", 200, false);
    }
    const graph = new myMxGraph(container);
    var parent = graph.getDefaultParent();
    graph.getModel().beginUpdate();
    try {
        var v1 = graph.insertVertex(parent, null, "Hello,", 20, 200, 80, 30);
        var v2 = graph.insertVertex(parent, null, "World", 200, 150, 80, 30);
        graph.insertEdge(parent, null, "", v1, v2);
    } finally {
        // Updates the display
        graph.getModel().endUpdate();
    }
}
onMounted(() => {
    console.log("app is onMounted");
    initGraph();
});

/* 
📒NOTES
insertVertex
参数 1：parents 生成节点要插入的父级容器
参数 2：null 此处可以设置节点的 id，便于识别节点，null 为默认 id
参数 3：label 此处设置节点的内容
参数 4：设置节点大小及节点在父级容器中的相对位置

insertEdge
参数 1：parents 生成边要插入的父级容器
参数 2：：null 此处可以设置节点的 id，便于识别边，null 为默认 id
参数 3：label 此处设置节点的内容
参数 4：边的起始节点和终止节点


graph.getModel().beginUpdate(); 表示 mxgraph 图准备更新前的状态 

graph.getModel().endUpdate(); 表示 mxgraph 图更新后的状态

`graph.getModel().beginUpdate()` 和 `graph.getModel().endUpdate()` 函数在 mxGraph 中用于包裹一系列图形模型（graph model）的修改操作，它们的作用是：

1. **beginUpdate()**: 此函数标志着图形模型事务的开始。调用此方法后，mxGraph 会暂停图形视图的自动重绘（repaint），这样在批量添加、删除或修改顶点（vertices，即节点）、边（edges，即连线）以及其他细胞（cells）时，可以显著提高性能。因为在一个大操作中多次重绘图表是非常消耗资源的，而通过事务机制，所有变化被收集起来，直到事务结束才一次性更新视图。

2. **endUpdate()**: 这个函数标志着图形模型事务的结束，并触发一次重绘操作来反映模型中所有在事务期间所做的更改。当 `endUpdate()` 被调用时，mxGraph 库会对图形进行必要的布局调整和渲染更新，确保用户界面展示的是事务处理后的最新状态。

简单来说，这两个函数共同实现了图形模型的事务性更新，保证了一组相关改动作为一个整体执行，提升了图形编辑的效率和用户体验。在实际编程中，它们应该成对使用，并且通常放在 try-finally 结构中，以确保即使在事务处理中有异常发生，也能正确地结束事务并释放资源。
*/


</script>

<style>
.example-editor {
    background: url("@/assets/editor/images/grid.gif");
    height: 100vh;
    width: 100%;
}
</style>
